<template>
  <view>
    <myHead
      :title="title"
      :right="true"
      text_right="保存"
      @clickRight="clickRight"
    ></myHead>
    <view class="conten">
      <view class="title"> 能力标签 </view>
      <view class="tishi">最多选择9个，被选择的标签将显示给招聘者</view>
      <view class="select">
        <text class="yixuan">已选</text>
        <view class="tags">
          <view class="tag" v-for="(item, key) in tags2" :key="key">
            <text> {{ item }}</text>
            <u-icon
              class="icon"
              name="close"
              color="#165dff"
              size="12"
              @click="handleClose(key)"
            ></u-icon>
          </view>
        </view>
      </view>
      <view class="tagList" style="margin-top: 60rpx">
        <view
          class="tagBox"
          :class="tagState(item) ? 'seleteTag' : ''"
          v-for="(item, key) in tagArr"
          :key="key"
          @click="chooseMD(item)"
          >{{ item }}</view
        >
      </view>
      <view class="customize">自定义标签</view>
      <view class="tagList" style="margin-top: 30rpx">
        <view class="customizeTag" @click="addTag">
          <view>新增标签</view>
          <u-icon
            name="plus"
            color="#165dff"
            size="12"
            style="margin-left: 10rpx"
          ></u-icon>
        </view>
        <view
          class="customizeBox"
          :class="tagState(item) ? 'seleteTag' : ''"
          v-for="(item, key) in customize"
          :key="key"
          @click.self="chooseMD(item)"
        >
          <view @click.self="chooseMD(item)">{{ item }}</view>
          <u-icon
            @click="close(key)"
            style="margin-left: 20rpx"
            name="close"
            color="#165dff"
            size="12"
          ></u-icon
        ></view>
      </view>
    </view>
    <u-popup :show="show" mode="center">
      <view
        class="popup"
        :style="{ width: screenWidth - 30 + 'px', height: 300 + 'rpx' }"
      >
        <view class="title">输入标签不超过六个字</view>
        <u--input
          style="margin: 0rpx 20rpx"
          placeholder="添加新标签"
          v-model="inputValue"
          border="none"
          round="20rpx"
        ></u--input>

        <view class="bts">
          <view class="bt" @click="cancel">取消</view>
          <view class="bt onSubmit" @click="onSubmit">确认</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      show: false,
      inputValue: "",
      title: "能力标签",
      tagArr: [],
      tags2: [],
      customize: [],
      screenWidth: "",
    };
  },
  onLoad(options) {
    this.jobLabelList(options.id);
    this.tags2 = JSON.parse(JSON.stringify(this.tags));
    const app = getApp();
    this.screenWidth = app.globalData.phoneInformation.screenWidth;
    console.log(this.screenWidth);
  },
  computed: {
    ...mapState({
      tags: (state) => state.tags,
    }),
  },
  methods: {
    ...mapMutations(["setTags"]),
    clickRight() {
      this.setTags(this.tags2);
      uni.navigateBack();
    },
    //获取系统标签
    jobLabelList(Id) {
      this.$http.huirc
        .jobLabelList({
          Id: Id,
        })
        .then((res) => {
          this.tagArr = res.Result.map((item) => {
            return item.FullName;
          });
        });
    },
    chooseMD(item) {
      let key = this.tags2.indexOf(item);
      if (key == -1) {
        this.tags2.push(item);
      } else {
        this.tags2.splice(key, 1);
      }
    },
    //判断tag标签的状态
    tagState(item) {
      return this.tags2.indexOf(item) == -1 ? false : true;
    },
    handleClose(key) {
      this.tags2.splice(key, 1);
    },
    handleInputConfirm() {
      if (this.dynamicTags.indexOf(this.inputValue) == -1) {
        if (this.inputValue.length < 7) {
          if (this.inputValue) {
            if (this.dynamicTags.length < 9) {
              this.dynamicTags.push(this.inputValue);
            } else {
              this.$util.toast("最多只能添加九个标签");
            }
          }
          this.inputVisible = false;
          this.inputValue = "";
        } else {
          this.$util.toast("最多输入6个字");
          this.inputVisible = true;
        }
      } else {
        this.$util.toast("该标签已存在");
      }
    },
    //添加tag标签
    addTag() {
      this.show = true;
    },
    // 取消标签
    cancel() {
      this.inputValue = "";
      this.show = false;
    },
    // 确认添加标签
    onSubmit() {
      this.customize.push(this.inputValue);
      this.tags2.push(this.inputValue);
      this.inputValue = "";
      this.show = false;
    },
    //删除标签
    close(key) {
      this.customize.splice(key, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.conten {
  box-sizing: border-box;
  padding: 20rpx;
  .title {
    font-size: 42rpx;
    font-weight: 600;
  }
  .tishi {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999999;
  }
  .select {
    margin-top: 30rpx;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 80rpx;
    .yixuan {
      font-size: 28rpx;
      color: #999999;
      margin-right: 20rpx;
    }
    .tags {
      flex: 1;
      display: flex;
      overflow-x: scroll;
      .tag {
        margin-right: 10rpx;
        background-color: #e7f5ff;
        padding: 10rpx 30rpx;
        font-size: 24rpx;
        color: #3c9cff;
        font-weight: bold;
        border: 2rpx solid #e2f0ff;
        border-radius: 200rpx;
        box-sizing: border-box;
        white-space: nowrap;
        display: flex;
        .icon {
          position: relative;
          top: 3rpx;
          margin-left: 6rpx;
        }
      }
    }
  }
  .tagList {
    display: flex;
    flex-wrap: wrap;

    .tagBox {
      height: 60rpx;
      border-radius: 8rpx;
      padding: 0rpx 40rpx;
      background-color: #ececec;
      font-size: 28rpx;
      box-sizing: border-box;
      text-align: center;
      margin-right: 20rpx;
      margin-bottom: 10rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .seleteTag {
      border: 3rpx solid #3c9cff !important;
      background-color: rgba($color: #3c9cff, $alpha: 0.1) !important;
      color: #3c9cff !important;
    }
  }
  .customize {
    margin-top: 30rpx;
    font-size: 36rpx;
    font-weight: 600;
  }
  .customizeTag {
    display: flex;
    align-items: center;
    border-radius: 8rpx;
    padding: 12rpx 20rpx;
    background-color: #ececec;
    font-size: 28rpx;
    box-sizing: border-box;
    text-align: center;
    margin-right: 2%;
    margin-bottom: 10rpx;
    justify-content: flex-start;
    color: #3c9cff;
    border: 3rpx solid #3c9cff;
  }
  .customizeBox {
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8rpx;
    padding: 0rpx 40rpx;
    background-color: #ececec;
    font-size: 28rpx;
    box-sizing: border-box;
    text-align: center;
    margin-right: 20rpx;
    margin-bottom: 10rpx;
  }
}
.popup {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 8rpx;

  .title {
    padding: 20rpx;
    margin-bottom: 20rpx;
    font-weight: 600;
    font-size: 32rpx;
  }
  .bts {
    margin-top: 20rpx;
    border-top: 2rpx solid #f8f7f7;
    display: flex;
    flex: 1;
    .bt {
      flex: 1;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .onSubmit {
      color: #3c9cff;
      border-left: 2rpx solid #f8f7f7;
    }
  }
}
</style>
